<template>

  <div>

    <h2 style="color: #FFFFFF;margin: 20px 0 20px 0; display: flex;flex-wrap: wrap;justify-content: center;">
      实例控制区
    </h2>

    <el-divider style="margin: 40vw"/>

    <div class="item_group" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px;margin-top: 6px;">

      <server-item name-p="HomeLab" info-p='HomeLab 控制台' logo-p="/" @click.native="$refs.dashboard_drawer_iframe.open('控制台','/manager/index')"></server-item>

      <server-item v-for="disk in disks"
                   :info-p=disk.diskType :logo-p="disk.color" :name-p="disk.name" @click.native="$refs.dashboard_drawer_iframe.open(disk.name,disk.url)"></server-item>

    </div>

    <dashboard_drawer_iframe ref="dashboard_drawer_iframe"></dashboard_drawer_iframe>

  </div>

</template>

<script>
import HardwareItemUps from "@/components/Dashboard/item/HardwareItem/ups.vue";
import HardwareItemRoute from "@/components/Dashboard/item/HardwareItem/route.vue";
import MonitorItem from "@/components/Dashboard/item/MonitorItem/index.vue";
import HardwareItemBastion from "@/components/Dashboard/item/HardwareItem/bastion.vue";
import Dashboard_drawer_iframe from "@/components/Dashboard/Drawer/iframe.vue";
import CpuRamIoItem from "@/components/Dashboard/item/CpuRamIoItem/index.vue";
import DiskItem from "@/components/Dashboard/item/DiskItem/index.vue";
import ServerItem from "@/components/Dashboard/item/ServerItem/index.vue";

export default {
  name: "dashboard_panel_service",
  components: {
    ServerItem,
    DiskItem,
    CpuRamIoItem,
    Dashboard_drawer_iframe,
    HardwareItemBastion,
    MonitorItem,
    HardwareItemRoute,
    HardwareItemUps
  },
  props: {
    title: {
      type: String,
      default: "IndSvr-行动"
    }
  },
  data() {
    return {
      disks: [
        {
          name: "USB",
          diskType: "usb",
          percentage: 60,
          color: "#0081ff"
        },
        {
          name: "DISK",
          diskType: "disk",
          percentage: 90,
          color: "#0081ff"
        },
        {
          name: "ISCSI",
          diskType: "iscsi",
          percentage: 30,
          color: "#0081ff"
        },
        {
          name: "SMB",
          diskType: "smb",
          percentage: 50,
          color: "#0081ff"
        },
        {
          name: "SMB",
          diskType: "nfs",
          percentage: 90,
          color: "#0081ff"
        },
        {
          name: "SMB",
          diskType: "smb",
          percentage: 50,
          color: "#0081ff"
        },
        {
          name: "SMB",
          diskType: "nfs",
          percentage: 90,
          color: "#0081ff"
        },
        {
          name: "ISCSI",
          diskType: "iscsi",
          percentage: 30,
          color: "#0081ff"
        },
        {
          name: "SMB",
          diskType: "smb",
          percentage: 50,
          color: "#0081ff"
        }
      ],
    }
  },
  methods: {

  },
  computed: {


  },
  filters: {

  }
}
</script>
<style scoped>
/* 隐藏 IE、Edge 和 Firefox 的滚动条 */
.item_group {
  flex-wrap: wrap;
  justify-content: center;
  overflow: auto;
}



</style>
